<template>
	<div class="userBg">
		<div class="container">
			<div class="tableBox">
				<zb-table :show-header="true" :columns="column" :fit="true" :border="true" :data="tableData" ></zb-table>	
			</div>
			
		</div>
		
		
		<div class="loadBox" v-if="searchLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
		
		<canvas canvas-id="waterMark" class="waterMark" style="width: 100vw; height: 100vh;"></canvas>
		<image :src="waterMarkUrl" class="waterMark-bg" style="width: 100vw; height: 100vh;"></image>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				banner: 'https://www.baixuemianshi.com/zhuanti/tiku/images/banner.jpg?' + new Date(),
				waterMarkUrl: "",
				windowWidth: 100,
				windowHeight: 100,
				
				moni:"",
				sList:[],
				tableData:[],
				column:[
				    { name: 'name', label: '姓名',fixed:true,width:80,emptyString:'--' },
				    { name: 'banji', label: '班级' },
				    { name: 'chaoshi', label: '是否超时' },
				    { name: 'liuchang', label: '流畅度' },
				    { name: 'shengyin', label: '声音' },
				    { name: 'weixiao', label: '微笑' },
				    { name: 'jiaoliu', label: '交流' },
				    { name: 'zuozi', label: '坐姿' },
				    { name: 'fuzhuang', label: '服装' },
				    { name: 'faxing', label: '发型' },
				    { name: 'zhuangrong', label: '妆容' },
				    { name: 'txpd1', label: '提醒判断1' },
				    { name: 'kjsy1', label: '框架使用1' },
				    { name: 'sfqt1', label: '是否切题1' },
				    { name: 'pingjia1', label: '评价1' },
				    { name: 'txpd2', label: '提醒判断2' },
				    { name: 'kjsy2', label: '框架使用2' },
				    { name: 'sfqt2', label: '是否切题2' },
				    { name: 'pingjia2', label: '评价2' },
					{ name: 'txpd3', label: '提醒判断3' },
					{ name: 'kjsy3', label: '框架使用3' },
					{ name: 'sfqt3', label: '是否切题3' },
					{ name: 'pingjia3', label: '评价3' },
					{ name: 'pingfen', label: '整体评分' },
					{ name: 'jianyi', label: '给出建议' },
				    
				],
			}
		},
		onShow() {
			if(wx.setVisualEffectOnCapture){
			wx.setVisualEffectOnCapture({
			visualEffect: 'hidden',
			success:(res) => {
			console.log('success回调',res)
			},
			})
			}
		},
		onHide() {
			if(wx.setVisualEffectOnCapture){
			wx.setVisualEffectOnCapture({
			visualEffect: 'none',
			success:(res) => {
			console.log('success回调',res)
			},
			})
			}
		},
		onLoad(options) {
			this.moni = options.moni
			this.getTeacher()
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		created() {
			let that = this;
			
			
		},
		mounted() {
			let that = this 
			if(this.userphone){
				this.drawWaterMark('雪恒教育-白雪面试 ' + this.userphone);
			}else{
				this.drawWaterMark('雪恒教育-白雪面试');
			}
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			getTeacher(){
				let that = this
				db.collection('nbhd_tiku_banjilist').where({
					// phone:'15636005542'
					phone:that.userphone
				}).get({
					success: res =>{
						if(res.data.length > 0){
							that.zbls = res.data[0].teacher
							that.getStudent(0)
						}else{
							that.searchLoading = false
						}
					}
				})
			},
			getStudent(page){
				let that = this
				db.collection('24sk_pingjia').where({
					zbls:that.zbls,
					moni: that.moni
				}).skip(page * 20).limit(20).get({
					success: res =>{
						console.log(res)
						if(res.data.length > 0){
							that.sList = that.sList.concat(res.data)
							let p = page + 1
							that.getStudent(p)
						}else{
							console.log(that.sList)
							that.filterTable()
						}
					}
				})
			},
			filterTable(){
				let that = this
				that.sList.map(item => {
					let obj =  {'name':item.student,
				     'banji':item.banji,
				     'chaoshi':item.formInfo[0].answer,
				     'liuchang':item.formInfo[1].answer,
				     'shengyin':item.formInfo[2].answer,
				     'weixiao':item.formInfo[3].answer,
				     'jiaoliu':item.formInfo[4].answer,
				     'zuozi':item.formInfo[5].answer,
				     'fuzhuang':item.formInfo[6].answer,
				     'faxing':item.formInfo[7].answer,
				     'zhuangrong':item.formInfo[8].answer,
				     'txpd1':item.formInfo[9].answer, 
				     'kjsy1':item.formInfo[10].answer,
				     'sfqt1':item.formInfo[11].answer,
				     'pingjia1':item.formInfo[12].answer,
				     'txpd2':item.formInfo[13].answer,
				     'kjsy2':item.formInfo[14].answer,
				     'sfqt2':item.formInfo[15].answer,
				     'pingjia2':item.formInfo[16].answer,
					 'txpd3':item.formInfo[17].answer,
					 'kjsy3':item.formInfo[18].answer,
					 'sfqt3':item.formInfo[19].answer,
					 'pingjia3':item.formInfo[20].answer,
					 'pingfen':item.formInfo[21].answer,
					 'jianyi':item.formInfo[22].answer}
					that.tableData.push(obj)
				})
			},
			
			drawWaterMark(text) {
				this.getDeviceInfo().then(response => {
					const w = response.windowWidth;
					const h = response.windowHeight;
					this.windowWidth = w;
					this.windowHeight = h;
					//创建canvas绘制上下文
					const canvas = uni.createCanvasContext("waterMark", this);
					canvas.clearRect(0, 0, w, h)
					//开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
					canvas.beginPath();
					canvas.setFontSize(18);
					canvas.setFillStyle('rgba(0, 0, 0, 0.1)');
					canvas.rotate(-30 * Math.PI / 180)
					if (text) {
						text = this.trim(text)
					}
					const maxWidth = text.length * 18
					for (let x = 0; x < 10; x++) {
						for (let y = 0; y < 20; y++) {
							//在画布上绘制被填充的文本。
							canvas.fillText(text, (maxWidth + 40) * x - 400, 90 * y + 20);
						}
					}
					//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
					canvas.draw(false, () => {
						//把当前画布指定区域的内容导出生成指定大小的图片
						uni.canvasToTempFilePath({
							canvasId: "waterMark",
							complete: (res) => {
								this.waterMarkUrl = res.tempFilePath
							}
						}, this)
					})
				});
			},
			trim(str) {
				let trimStr = '';
				const reg = /[\t\r\f\n\s]*/g;
				if (typeof str === 'string') {
					trimStr = str.replace(reg, '');
				}
				return trimStr
			},
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			}
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>